<template lang="html">
    <transition name="mask-bg-fade">
        <div class="mask" v-show="show">
            <transition name="slide-fade">
                <div class="modelBox" v-show="show">
                    <div class="tipIcon">
                      <div class="title"><i class="tipIcon_icon"></i>{{confirmModalOptions.title || "提示"}}</div>
                      <div class="title_right">{{confirmModalOptions.title_right || ""}}</div>
                      <div class="closeModel" v-on:click="closeModel()"></div>
                    </div> 
                    <div class="message textCenter" v-html='confirmModalOptions.message || " "'></div>
                    <div class="model_btnBox">
                        <div class="dh_button_default2" v-on:click="confirmCancel()">
                            {{confirmModalOptions.btnCancelText || "取消"}}
                        </div>
                        <div class="dh_button_blue" v-on:click="confirmSubmit()">
                            {{confirmModalOptions.btnSubmitText || "确定"}}
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>
<script>
  export default {
    props: ["confirmModalOptions"],
    data() {
      return {
        show: false,
      }
    },
    methods: {
      closeModel: function () {
        this.show = false;
      },
      showModel: function () {
        this.show = true;
      },
      confirmCancel: function () {
        this.show = false;
        if(typeof (this.confirmModalOptions.btnCancelFunction)==='function'){
          this.confirmModalOptions.btnCancelFunction()
        }
      },
      confirmSubmit: function () {
        this.show = false;
        if(typeof (this.confirmModalOptions.btnSubmitFunction)==='function'){
          this.confirmModalOptions.btnSubmitFunction()
        }
      }
    }
  }
</script>
<style lang="less">
@import '../../assets/less/index.less';
  .mask{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    line-height: 100vh;
    background-color: rgba(0,0,0,0.3);
    .modelBox{
      width: 88vw;
      margin: 0 auto;
      border-radius: 1vw;
      display: inline-block;
      background-color: #ffffff;
      overflow: hidden;
      .tipIcon{
        background-color: #eeeeee;
        height: 10vw;
        line-height: 10vw;
        .title{
          width: 30vw;
          margin-left: 3vw;
          text-align: left;
          float: left;
          .tipIcon_icon{
            display: inline-block;
            position: relative;
            top: 1vw;
            margin-right: 2vw;
            .icon-tankuangtishi();
          }
        }
        .title_right{
          float: right;
          margin-right: 3vw;
        }
      }
      .textCenter{
        line-height: 6vw;
        padding: 2vw;
        .hebing{
          height: 10vw;
          overflow: hidden;
          zoom:1;
          p{
            display: inline-block;
            float: left;
            text-align: left;
            &:nth-child(1){
              width: 50vw;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
            &:nth-child(2){
              width: 20vw;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
            &:nth-child(3){
              width: 8vw;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }
          }
        }
      }
      .model_btnBox{
        width: 100%;
        height: 15vw;
        line-height: 15vw;
      }
      .dh_button_default2,.dh_button_blue{
        width: 35vw;
        height: 10.6vw;
        display: inline-block;
        line-height: 10.6vw;
        border-radius: 1vw;
        background-color: #ffcc00;
        color: #ffffff;
      }

      .dh_button_blue{
        width: 35vw;
        margin-left: 5vw;
        background-color: #e74c4c;
      }
    }
  }
</style>